<div class="giveHeight"> 
    <table class="responsive dynamicTable display table table-bordered dataTable">
        <thead>        
            <tr>
{# sorting of properties based on query components #}
                    {{ knp_pagination_sortable(pagination, 'Libelle', 'u.libelle') }}
                    {{ knp_pagination_sortable(pagination, 'Libelle', 'u.code') }}
                    <th>Chiffre après la virgule</th>
                    <th>Action</th>
                </tr>
            </thead>

{# table body #}
{% for unite in pagination %}
            <tr {% if loop.index is odd %}class="color"{% endif %}>
                <td>{{ unite.libelle }}</td>
                <td>{{ unite.code }}</td>
                <td>{{ unite.chiffreVirgule }}</td>
                <td class="center ">
                    <div class="controls center">
                        <a class="tip" href="javascript:editUnite('{{unite.id}}')" oldtitle="Edit task" title="" aria-describedby="ui-tooltip-4">
                            <span class="icon12 icomoon-icon-pencil"></span>
                        </a>
                            {% if is_granted('ROLE_SUPER_ADMIN') %}
                        <a class="tip" href="javascript:removeUnite('{{unite.id}}','{{unite.libelle}}')" oldtitle="Remove task" title="">
                            <span class="icon12 icomoon-icon-remove"></span>
                        </a>
                            {% endif %}
                    </div>
                </td>
            </tr>
{% endfor %}
        </table>
    </div>
    <div id="DataTables_Table_0_info" class="dataTables_info">Affichage de {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + 1}} à {{ (pagination.getCurrentPageNumber -1)*pagination.getItemNumberPerPage + pagination.getItemNumberPerPage}} de {{ pagination.getTotalItemCount }} Unite</div>
{# display navigation #}
    <div id="DataTables_Table_0_paginate" class="dataTables_paginate paging_full_numbers">
    {{ knp_pagination_render(pagination) }}
        </div>
        <div style="display: none" id="modal" title="Dialog Title" class="dialog">
            <input type="hidden" id="unite_remove_id" value="" />
            <p>Voulez-vous vraiment placer <span id="text_libelle" style="font-weight: bold"></span> dans la corbeille ?</p></br>

        </div>
        <script>
            function editUnite(id) {
                $.ajax({
                    url: '{{path('gds_unite_edit')}}',
                    data: 'id=' + id,
                    success: function(data) {
                        $('#div_unite').html(data)
                    }
                })
            }
             {% if is_granted('ROLE_SUPER_ADMIN') %}
            function removeUnite(id, libelle) {
                $('#unite_remove_id').val(id)
                $('#modal').dialog({
                    autoOpen: false,
                    widht: 100,
                    modal: true,
                    dialogClass: 'dialog',
                    buttons: {
                        "Non": function() {
                            $(this).dialog("close");

                        },
                        "Oui": function(id) {
                            $.ajax({
                                url: '{{path('gds_unite_delete')}}',
                                data: 'id=' + $('#unite_remove_id').val(),
                                success: function(data) {
                                    $('#div_unite').html(data)
                                }
                            })
                            $(this).dialog("close");
                            $(this).remove()
                        }
                    }
                });
                $('#ui-dialog-title-modal').html('Suppresion :' + libelle)
                $('#text_libelle').html(libelle)
                $('#modal').dialog('open');
            }
            {% endif %}
            </script>